<template>
  <layout
    v-loading="loading || getTableLoading"
    viewName="作业指导书"
    v-if="!fullScreen"
    :tableData="tableData"
    :workStep="workStep"
  >
    <!-- <template #btn>
      <el-button type="primary" plain @click="fullScreen = !fullScreen">全屏</el-button>
    </template> -->
    <yulan :tableData="tableData" :yulanData="yulanData" :loading="loading" />
  </layout>
  <div class="al_productionProcess_fullScreen" v-else>
    <div class="outFullScreen" @click="fullScreen = !fullScreen">
      <el-tooltip class="item" effect="dark" content="退出全屏" placement="bottom-start">
        <i class="el-icon-switch-button"></i>
      </el-tooltip>
    </div>
    <yulan :tableData="tableData" :yulanData="yulanData" :loading="loading" />
  </div>
</template>

<script>
import layout from '../layout/index.vue';
import yulan from './yulan.vue';
import request from '../../../api/http';
import threeLocal from '../threeLocal';
import storage from 'js-storage';

export default {
  mixins: [threeLocal],
  components: { layout, yulan },
  data() {
    return {
      yulanData: {},
      fullScreen: false, // 是否全屏
    };
  },
  created() {
    this.init();
  },
  watch: {
    workStep: {
      handler(newVal, oldVal) {
        this.getPdf();
      },
      deep: true,
    },
  },
  methods: {
    async init() {
      await this.getData();
      this.getPdf();
    },
    getPdf() {
      this.loading = true;
      request({
        method: 'GET',
        url: `/output/api/info/${this.taskId}/${this.workStep.stepNo}`,
        // url: `/output/api/info/63/15-8`,
        // responseType: 'blob',
      }).then(res => {
        this.yulanData = res.data.data;
        this.loading = false;
        // const self = this;
        // let blob;
        // // 增加iframe的地址
        // blob = new Blob([res.data], { type: 'application/pdf' });
        // self.imageSrc = null;
        // self.filelink = `${window.URL.createObjectURL(blob)}`; // #toolbar=0
      });
    },
  },
};
</script>

<style lang="scss">
.al_productionProcess_fullScreen {
  width: 100vw;
  height: 100vh;
  .outFullScreen {
    position: absolute;
    right: 10%;
    top: 40px;
    font-size: 40px;
    color: #f56c6c;
    &:hover {
      color: #ec3a3a;
    }
  }
}
</style>
